<template>
  <el-card shadow="never" class="rounded-lg">
    <div v-loading="tableLoading">
      <el-table :data="tableData">
        <el-table-column label="序号" type="index" width="60" align="center" :index="indexMethod" />
        <el-table-column label="指标类型" prop="indicatorType" align="center" min-width="150" show-overflow-tooltip />
        <el-table-column label="权重" prop="weight" align="center" min-width="80" />
        <el-table-column label="安全指数名称" prop="safetyName" align="center" min-width="150" />
        <el-table-column label="分类" prop="type" align="center" min-width="200" show-overflow-tooltip />
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
    </div>

    <div class="flex items-center justify-between mt-4">
      <div class="text-gray-500">共{{ pagination.total }}条</div>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 12, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { StatisticRow } from './constant';

defineProps<{
  tableData: StatisticRow[];
  tableLoading: boolean;
}>();

const emit = defineEmits(['update:pagination', 'fetchList']);

const pagination = defineModel<{
  currentPage: number;
  pageSize: number;
  total: number;
}>('pagination', { required: true });

const indexMethod = (index: number) => (pagination.value.currentPage - 1) * pagination.value.pageSize + index + 1;

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
  emit('fetchList');
};

const handleCurrentChange = (page: number) => {
  pagination.value.currentPage = page;
  emit('fetchList');
};
</script>

<style scoped lang="scss"></style>
